<template>
  <div id="userLayout" class="user-layout-wrapper">
    <div class="container">
      <div class="content">
        <div class="bg"></div>
        <div class="user-layout-content">
          <router-view/>
        </div>
      </div>
    </div>
<!--    <footer class="display-center">

    </footer>-->
  </div>
</template>

<script>
import {deviceMixin} from "@/store/device-mixin";
import SelectLang from "@/components/SelectLang";

export default {
  name: "UserLayout",
  components: {
    SelectLang
  },
  mixins: [deviceMixin],
  mounted() {
    document.body.classList.add("userLayout");
  },
  beforeDestroy() {
    document.body.classList.remove("userLayout");
  },
  created() {
    console.log(this.$router.options.routes);
  },
};
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-width: 1200px;

  header {
    height: 80px;
    min-height: 80px;
    padding: 0 40px;

    .logo {
      width: 120px;

      img {
        width: 100%;
      }
    }

    .action {
      .btn {
        display: inline-block;
        min-width: 68px;
        padding: 0 15px;
        border-radius: 50px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }

  footer {
    height: 120px;
    min-height: 120px;
  }

  .container {
    background: #f0f2f5 url('~@/assets/background.svg') no-repeat 100% 100%;
    background-size: 100% 100%;
    flex: 1;
    min-height: 756px;

    .content {
      width: 1140px;
      height: 100%;
      margin: 0 auto;
      position: relative;

      .bg {
        //width: 672px;
        //height: 488px;
        width: 435px;
        height: 390px;
        //background: url(~@/assets/images/login_9.png) no-repeat 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        // width: 580px;
        // height: 420px;
        left: 0;
        top: 50%;
        margin-top: -210px;
      }

      .user-layout-content {
        width: 510px;
        min-height: 400px;
        padding: 32px 0 24px;
        background: #fff;
        min-height: 394px;
        border-radius: 5px;
        position: absolute;
        right: 0px;
        top: 50%;
        margin-top: -197px;
        opacity: 1;
        padding: 20px 50px;
      }
    }
  }
}
</style>